<template>
  <div class="son-page-container" :style="{ backgroundImage: `url(${website_bg_url})` }">
    <el-container class="main-container">
      <el-header height="10vh" class="header-container">
        <MyHeader></MyHeader>
      </el-header>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="spacer">
              <div class="content-nav">
                <div class="nav-right">
                  <button class="nav-btn" @click="handleVideoLibrary">
                    <el-icon class="btn-icon">
                      <VideoCamera/>
                    </el-icon>
                    视频库
                  </button>
                </div>
              </div>
            </div>
            <div class="area-container menu-container area-container-sec">
              <div class="sub-menu-title">视频模型</div>
              <!-- <div v-for="menu in page_menu_list" :key="menu.id" class="menu-item">
                <div class="parent-menu" @click="toggleMenu(menu)">
                  <span>{{ menu.name }}</span>
                  <el-icon class="expand-icon" :class="{ 'is-expanded': menu.isExpanded }">
                    <ArrowDown/>
                  </el-icon>
                </div>
                <div class="child-menu" v-show="menu.isExpanded">
                  <div
                    v-for="child in menu.child"
                    :key="child.id"
                    class="child-item"
                    :class="{ selected: selectedMenuId === child.id }"
                    @click="handleChildClick(child)"
                  >
                    {{ child.name }}
                  </div>
                </div>
              </div> -->
              <div class="category-menu">
                <div v-for="menu in page_menu_list" :key="menu.id" class="category-menu-item">
                  <div class="category-parent" @click="toggleCategoryMenu(menu)">
                    <span class="category-title">{{ menu.name }}</span>
                    <el-icon class="category-expand-icon" :class="{ 'is-expanded': menu.isExpanded }">
                      <ArrowDown/>
                    </el-icon>
                  </div>
                  <div class="category-children" v-show="menu.isExpanded">
                    <div
                        v-for="child in menu.children.filter(c => c.name !== '爆款文案')"
                        :key="child.id"
                        class="category-child-item"
                        :class="{ selected: selectModelId === child.id }"
                        @click="handleCategoryChildClick(child)"
                    >
                      {{ child.name }}
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </el-col>
          <el-col :span="5">
            <div class="area-container center-area">
              <div class="center-content">
                <!-- 按 showType 控制按钮和表单的显示 -->
                <div class="button-group" v-if="showType === 'default'">
                  <el-button
                      :type="activeButton === 'keywords' ? 'primary' : 'default'"
                      @click="handleButtonSwitch('keywords')"
                  >
                    关键词录入
                  </el-button>
                  <el-button
                      :type="activeButton === 'original' ? 'primary' : 'default'"
                      @click="handleButtonSwitch('original')"
                  >
                    原文录入
                  </el-button>
                </div>
                <div class="button-group" v-else-if="showType === 'originalOnly'">
                  <el-button type="primary">原文录入</el-button>
                </div>
                <div class="button-group" v-else>
                  <el-button type="primary">关键词录入</el-button>
                </div>

                <!-- 关键词录入的多行文本框 -->
                <div class="text-area-container"
                     v-if="(showType === 'default' && activeButton === 'keywords') || showType === 'keywordsOnly'">
                  <el-input
                      v-model="formData.keywordsContent"
                      type="textarea"
                      :rows="6"
                      placeholder="请输入产品名称和卖点：例如 楠火锅，川味火锅，鸳鸯锅、特色卤鸡脚"
                      class="text-area"
                  />
                </div>

                <!-- 原文录入的多行文本框 -->
                <div class="text-area-container"
                     v-if="(showType === 'default' && activeButton === 'original') || showType === 'originalOnly'">
                  <el-input
                      v-model="formData.originalContent"
                      type="textarea"
                      :rows="6"
                      placeholder="系统会根据你录入的原文案智能仿写字数和意思一样的文案"
                      class="text-area"
                  />
                  <div class="extract-link" @click="handleExtractText">
                    链接提取文案
                  </div>
                </div>

                <!-- id25表单 -->
                <div class="text-area-container" v-if="showType === 'keywords25'">
                  <el-form :model="formData" label-position="left" class="group-form">
                    <el-form-item label="城市" label-width="80px">
                      <el-input v-model="formData.groupCity" placeholder="请输入城市"/>
                    </el-form-item>
                    <el-form-item label="店铺类型" label-width="80px">
                      <el-input v-model="formData.groupShopType" placeholder="请输入店铺类型"/>
                    </el-form-item>
                    <el-form-item label="店铺名称" label-width="80px">
                      <el-input v-model="formData.groupShopName" placeholder="请输入店铺名称"/>
                    </el-form-item>
                    <el-form-item label="套餐名称" label-width="80px">
                      <el-input v-model="formData.groupSetMenuName" placeholder="请输入套餐名称"/>
                    </el-form-item>
                    <el-form-item label="套餐内容" label-width="80px">
                      <el-input v-model="formData.groupSetMenuContent" placeholder="请输入套餐内容"/>
                    </el-form-item>
                    <el-form-item label="原价" label-width="80px">
                      <el-input v-model="formData.groupSetMenuPriceOld" placeholder="请输入原价"/>
                    </el-form-item>
                    <el-form-item label="现价" label-width="80px">
                      <el-input v-model="formData.groupSetMenuPriceNew" placeholder="请输入现价"/>
                    </el-form-item>
                    <el-form-item label="卖点" label-width="80px">
                      <el-input v-model="formData.groupSellingPoint" placeholder="请输入卖点"/>
                    </el-form-item>
                  </el-form>
                </div>
                <!-- id18表单 -->
                <div class="text-area-container" v-if="showType === 'keywords18'">
                  <el-form :model="formData" label-position="left" class="group-form">
                    <el-form-item label="姓名" label-width="80px">
                      <el-input v-model="formData.personName" placeholder="请输入姓名"/>
                    </el-form-item>
                    <el-form-item label="年龄" label-width="80px">
                      <el-input v-model="formData.personAge" placeholder="请输入年龄"/>
                    </el-form-item>
                    <el-form-item label="家乡" label-width="80px">
                      <el-input v-model="formData.personHomeTown" placeholder="请输入家乡"/>
                    </el-form-item>
                    <el-form-item label="城市" label-width="80px">
                      <el-input v-model="formData.personCity" placeholder="请输入城市"/>
                    </el-form-item>
                    <el-form-item label="行业" label-width="80px">
                      <el-input v-model="formData.personIndustry" placeholder="请输入行业"/>
                    </el-form-item>
                    <el-form-item label="店铺类型" label-width="80px">
                      <el-input v-model="formData.personShopType" placeholder="请输入店铺类型"/>
                    </el-form-item>
                    <el-form-item label="店铺名称" label-width="80px">
                      <el-input v-model="formData.personShowName" placeholder="请输入店铺名称"/>
                    </el-form-item>
                    <el-form-item label="工作年限" label-width="80px">
                      <el-input v-model="formData.personWorkInYear" placeholder="请输入工作年限"/>
                    </el-form-item>
                    <el-form-item label="卖点" label-width="80px">
                      <el-input v-model="formData.personSellingPoint" placeholder="请输入卖点"/>
                    </el-form-item>
                  </el-form>
                </div>
                <!-- id40表单 -->
                <div class="text-area-container" v-if="showType === 'keywords40'">
                  <el-form :model="formData" label-position="left" class="group-form">
                    <el-form-item label="城市" label-width="80px">
                      <el-input v-model="formData.screenshotCity" placeholder="请输入城市"/>
                    </el-form-item>
                    <el-form-item label="店铺类型" label-width="80px">
                      <el-input v-model="formData.screenshotShopType" placeholder="请输入店铺类型"/>
                    </el-form-item>
                    <el-form-item label="店铺名称" label-width="80px">
                      <el-input v-model="formData.screenshotShopName" placeholder="请输入店铺名称"/>
                    </el-form-item>
                    <el-form-item label="礼品" label-width="80px">
                      <el-input v-model="formData.screenshotGift" placeholder="请输入礼品"/>
                    </el-form-item>
                  </el-form>
                </div>

                <!-- 模板选择区域 -->
                <div v-if="showChangeModel()" class="template-section">
                  <div class="template-header">
                    <div class="sub-menu-title">模版选择</div>
                    <el-switch
                        size="large"
                        v-model="handModel"
                        class="ml-2"
                        inline-prompt
                        active-text="手动选择"
                        inactive-text="随机模版"
                    />
                  </div>
                </div>

                <!-- 手动选择模板表格 -->
                <div v-if="showHandModel()" class="template-table-section">
                  <el-table
                      :data="tableData"
                      height="auto"
                      max-height="25vh"
                      class="modelTable"
                      header-row-class-name="modelTable-header"
                      row-class-name="modelTable-header"
                      @selection-change="handleModelSelectionChange"
                  >
                    <el-table-column type="selection" :selectable="selectedModel" width="55"/>
                    <el-table-column prop="name" label="模版名称"/>
                    <el-table-column label="操作" width="100">
                      <template #default="scope">
                        <el-button
                            type="primary"
                            size="small"
                            @click="handleViewVideo(scope.row)"
                        >
                          预览
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="15">
            <div class="area-container right-area">
              <!-- 右侧区域内容 -->
              <el-container direction="vertical" style="height: 100%;">
                <!-- 新增的控制行 -->
                <el-header height="auto" class="control-row" style="flex-shrink: 0;">
                  <div class="control-container">
                    <div class="control-item">
                      <el-button type="primary" size="small" @click="handleUpload">上传素材</el-button>
                      <span class="control-count">已选中{{ selectVideoData.length }}条数据</span>
                    </div>
                    <div class="control-item" v-if="showFlag">
                      <el-button type="primary" size="small" @click="handleUploadAudio">上传音频</el-button>
                      <span class="control-count">已选中{{ selectAudioData.length }}条数据</span>
                    </div>
                    <div class="control-item"  v-if="showFlag">
                      <el-button type="primary" size="small" @click="handleUploadIndex">开头素材</el-button>
                      <span class="control-count">已选中{{ selectVideoDataIndex.length }}条数据</span>
                    </div>
                    <div class="control-item">
                      <span class="control-label">生成数量</span>
                      <el-input-number
                          v-model="generateCount"
                          :min="1"
                          :max="10"
                          size="small"
                          @change="handleGenerateCountChange"
                      />
                    </div>
                    <div class="control-item">
                      <el-button type="primary" size="small" @click="handleGenerate">生成文案</el-button>
                      <el-button type="warning" size="small" @click="handleReset">重置</el-button>
                    </div>
                  </div>
                </el-header>
                <!-- 上区域：标题 -->
                <el-header height="auto" class="title-row" style="flex-shrink: 0;">
                  <div class="menu-title">文案作用于视频内容和发布时标题</div>
                  <div class="disclaimer-text">
                    内容为AI生成，你可以自定义修改或增减，您对该内容的使用应严格遵循国家相关法律法规的规定
                  </div>
                </el-header>
                <!-- 中间区域：内容列表 -->
                <el-main class="wechat-list-main" style="padding: 0; flex: 1 1 0; overflow-y: auto;">
                  <!-- 输入框区域 -->
                  <div class="wechat-input-list">
                    <div v-for="(content, idx) in streamContents" :key="idx" class="wechat-input-wrapper">
                      <textarea
                          class="wechat-textarea"
                          rows="3"
                          v-model="streamContents[idx]"
                          maxlength="500"
                          placeholder="请输入内容..."
                      ></textarea>
                      <div class="wechat-input-footer">
                        <button class="wechat-delete-btn" @click="removeContent(idx)">🗑 删除</button>
                        <div class="wechat-input-right">
                          <span class="wechat-char-count">{{ streamContents[idx]?.length || 0 }}/500</span>
                          <button class="wechat-plus-btn" @click="onPlusClick">＋</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 图片框区域 -->
                  <el-row :gutter="16" style="margin-top: 24px;">
                    <el-col v-for="(item, idx) in pictureContents" :key="idx" :span="6" style="margin-bottom: 16px;">
                      <DouyinShow :item="item"/>
                    </el-col>
                  </el-row>
                </el-main>
                <!-- 下区域：按钮 -->
                <el-footer height="auto" class="generate-video-bottom" style="flex-shrink: 0;">
                  <template v-if="streamContents.length > 0">
                    <span style="align-self: center; color: #fff; margin-right: 16px; font-size: 15px;">生成{{
                        streamContents.length
                      }}条视频</span>
                    <el-button type="success" @click="handleGenerateVideo">生成视频</el-button>
                  </template>
                  <template v-if="pictureContents.length > 0">
                    <el-button type="success" @click="handlePublicVideo">授权发布</el-button>
                  </template>
                </el-footer>
              </el-container>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <MyDialog
        v-model="showUploadDialog"
        title="素材上传"
        width="65%"
        :modal="true"
        :close-on-click-modal="false"
        @confirm="handleUploadConfirm"
    >
      <SourceVideoNew ref="sourceVideoNewRef" @confirm="handleUploadConfirm"/>
    </MyDialog>

    <MyDialog
        v-model="showUploadIndexDialog"
        title="素材上传"
        width="65%"
        :modal="true"
        :close-on-click-modal="false"
        @confirm="handleUploadIndexConfirm"
    >
      <SourceVideoNew ref="sourceVideoNewIndexRef" @confirm="handleUploadIndexConfirm"/>
    </MyDialog>

    <MyDialog
        v-model="showUploadAudio"
        title="音频上传"
        width="65%"
        :modal="true"
        :close-on-click-modal="false"
        @confirm="handleUploadConfirmAudio"
    >
      <SourceAudioNew ref="sourceAudioNewRef" @confirm="handleUploadConfirmAudio"/>
    </MyDialog>

    <!-- 发布设置弹窗 -->
    <MyDialog
        v-model="showPublishDialog"
        title="发布设置"
        width="600px"
        :modal="true"
        :close-on-click-modal="false"
        @confirm="handlePublishConfirm"
        @cancel="handlePublishCancel"
    >
      <div class="publish-form">
        <!-- 发布类型 -->
        <div class="form-section">
          <div class="section-label">发布类型</div>
          <div class="publish-type-buttons">
            <button
                :class="['type-btn', publishForm.publishType === 'douyin' ? 'active' : '']"
                @click="publishForm.publishType = 'douyin'"
            >
              抖音发布
            </button>
            <!--            <button
                            :class="['type-btn', publishForm.publishType === 'xiaohongshu' ? 'active' : '']"
                            @click="publishForm.publishType = 'xiaohongshu'"
                        >
                          小红书发布
                        </button>-->
          </div>
        </div>

        <!-- 活动名称 -->
        <div class="form-section">
          <div class="section-label">活动名称</div>
          <el-input
              v-model="publishForm.activityName"
              placeholder="请输入活动名称"
              class="form-input"
          />
        </div>

        <!-- 标题 -->
        <div class="form-section">
          <div class="section-label">标题</div>
          <el-input
              v-model="publishForm.title"
              type="textarea"
              :rows="2"
              placeholder="发布时标题会自动携带(数字人请手动录入)"
              class="form-input"
          />
        </div>

        <!-- 话题 -->
        <div class="form-section">
          <div class="section-label">话题</div>
          <el-input-tag
              v-model="publishForm.topic"
              placeholder="请输入话题，按回车添加"
              class="form-input"
          />
          <div class="form-tip">
            <el-icon>
              <InfoFilled/>
            </el-icon>
            一行代表一个话题
          </div>
        </div>

        <!-- 挂载 -->
        <div class="form-section" v-if="publishForm.publishType === 'douyin'">
          <div class="section-label">挂载</div>
          <div class="mount-buttons">
            <button
                :class="['mount-btn', publishForm.mount === 'none' ? 'active' : '']"
                @click="publishForm.mount = 'none'"
            >
              无
            </button>
            <button
                :class="['mount-btn', publishForm.mount === 'poi' ? 'active' : '']"
                @click="publishForm.mount = 'poi'"
            >
              POI地址/团购
            </button>
            <button
                :class="['mount-btn', publishForm.mount === 'miniprogram' ? 'active' : '']"
                @click="publishForm.mount = 'miniprogram'"
            >
              小程序
            </button>
          </div>
        </div>
        <!-- POI -->
        <div class="form-section" v-if="publishForm.publishType === 'douyin' && publishForm.mount === 'poi'">
          <div class="section-label">挂载内容</div>
          <div style="display: flex; gap: 8px; width: 100%;">
            <el-input v-model="publishForm.poi1" placeholder="请输入关键词" style="flex:1;"/>
            <el-input v-model="publishForm.poi2" placeholder="请输入城市" style="flex:1;"/>
            <el-button icon="el-icon-search" type="primary" @click="handleChooseCityKeyWord">搜索</el-button>
          </div>
          <div style="margin-top: 8px;">
            <el-select v-model="publishForm.poiSelect" placeholder="请选择" style="width: 100%;">
              <el-option v-for="item in cityData" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </div>
        </div>
        <!-- 小程序 -->
        <div class="form-section" v-if="publishForm.publishType === 'douyin' && publishForm.mount === 'miniprogram'">
          <div class="section-label">挂载内容</div>
          <el-input v-model="publishForm.miniId" placeholder="例如：ttef91b112671b152ba ID" style="margin-bottom: 8px;"/>
          <el-input v-model="publishForm.miniTitle" placeholder="请输入小程序标题" style="margin-bottom: 8px;"/>
          <el-input v-model="publishForm.miniPath" placeholder="例如：path/pages/index"/>
        </div>
        <!-- 数据获取 -->
        <!-- <div class="form-section" v-if="publishForm.publishType === 'douyin'">
          <div class="section-label">数据获取</div>
          <div class="data-acquisition-row">
            <el-switch
                v-model="publishForm.dataAcquisition"
                active-color="#409EFF"
            />
            <div class="form-tip">
              <el-icon>
                <InfoFilled/>
              </el-icon>
              打开数据获取后,需要用户确定授权
            </div>
          </div>
        </div> -->

        <!-- 随机图片数量 -->
        <div class="form-section">
          <div class="section-label">随机图片数量</div>
          <el-input-number
              v-model="publishForm.picnums"
              :min="0"
              :max="9999"
              class="scan-limit-input"
          />
        </div>

        <!-- 扫码数量限制 -->
        <div class="form-section">
          <div class="section-label">扫码数量限制</div>
          <el-input-number
              v-model="publishForm.scanCodeLimit"
              :min="0"
              :max="9999"
              class="scan-limit-input"
          />
        </div>
      </div>
    </MyDialog>

    <!-- 二维码显示弹窗 -->
    <MyDialog
        v-model="showQrCodeDialog"
        title="请扫码发布"
        width="600px"
        :modal="true"
        :close-on-click-modal="false"
        @confirm="handleQrCodeConfirm"
        @cancel="handleQrCodeConfirm"
    >
      <!-- 二维码显示区域 -->
      <div class="form-section" v-if="douyinQrCode || redBookAndroidQrCode || redBookIOSQrCode">
        <div class="qr-code-container">
          <!-- 抖音二维码 -->
          <div v-if="douyinQrCode" class="qr-code-item">
            <div class="qr-code-title">抖音二维码</div>
            <img :src="douyinQrCode" alt="抖音二维码" class="qr-code-image"/>
          </div>
          <!-- 小红书Android二维码 -->
          <div v-if="redBookAndroidQrCode" class="qr-code-item">
            <div class="qr-code-title">小红书Android二维码</div>
            <img :src="redBookAndroidQrCode" alt="小红书Android二维码" class="qr-code-image"/>
          </div>
          <!-- 小红书iOS二维码 -->
          <div v-if="redBookIOSQrCode" class="qr-code-item">
            <div class="qr-code-title">小红书iOS二维码</div>
            <img :src="redBookIOSQrCode" alt="小红书iOS二维码" class="qr-code-image"/>
          </div>
        </div>
      </div>
    </MyDialog>
    <el-dialog
        v-model="showTaskNameDialog"
        title="请输入任务名"
        width="400px"
        :close-on-click-modal="false"
        class="task-name-dialog"
        align-center
    >
      <div class="task-name-dialog-content">
        <el-input v-model="taskNameInput" placeholder="请输入任务名" class="task-name-input"/>
      </div>
      <template #footer>
        <div class="task-name-dialog-footer">
          <el-button @click="handleTaskNameCancel">取消</el-button>
          <el-button type="primary" @click="handleTaskNameConfirm">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <MyDialog
        v-model="showViewVideoDialog"
        title="预览视频"
        width="50%"
        :modal="true"
        :close-on-click-modal="false"
        @confirm="handleViewVideoConfirm"
        @cancel="handleViewVideoCancel"
    >
      <div class="video-preview-content">
        <!-- 空内容区域 -->
        <VideoShow :videoJsonData="videoJsonData" ref="videoShowRef"/>
      </div>
    </MyDialog>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref, computed, reactive} from 'vue'
import axiosUtil from '../../axios-util/axios-util'
import VideoShow from './VideoShow.vue'
import {
  ArrowDown,
  VideoCamera,
  ChatDotRound,
  Star,
  Share,
  Pointer,
  Menu,
  Search,
  InfoFilled
} from '@element-plus/icons-vue'
import {useRouter} from 'vue-router'
import {ElMessage, ElLoading} from 'element-plus'
import MyDialog from '../common/MyDialog.vue'
import SourceVideoNew from '../videoWarehouse/SourceVideoNewBV.vue'
import SourceAudioNew from '../videoWarehouse/SourceAudioNewBV.vue'
import DouyinShow from './DouyinShow.vue'
import type {PictureContent} from '../../utils/types'
import MyHeader from '../common/MyHeader.vue'
import utils from '../../utils/utils'
import QRCode from 'qrcode'
import LocalStorageUtil from "../../utils/LocalStorageUtil.ts";


//主题控制light  dark
const theme = utils.getTheme();
const router = useRouter()

// 网站背景图
const website_bg_url = ref('')
// 本页菜单
const page_menu_list = ref([])
// 当前激活的按钮
const activeButton = ref('keywords')
// 生成数量
const generateCount = ref(0)
// // 当前选中的菜单ID
// const selectedMenuId = ref(null)
// // 当前展开的父菜单ID
// const expandedMenuId = ref(null)
const selectModelId = ref(null);
const handModel = ref(false);
//上传素材时，选中的数据
const selectVideoData = ref([])
const selectVideoDataIndex = ref([])
const selectAudioData = ref([])
//form表单
const formData = ref({
  keywordsContent: '',
  originalContent: '',
  groupCity: '',
  groupShopType: '',
  groupShopName: '',
  groupSetMenuName: '',
  groupSetMenuContent: '',
  groupSetMenuPriceOld: '',
  groupSetMenuPriceNew: '',
  groupSellingPoint: '',
  personName: '',
  personAge: '',
  personHomeTown: '',
  personCity: '',
  personIndustry: '',
  personShopType: '',
  personShowName: '',
  personWorkInYear: '',
  personSellingPoint: '',
  screenshotCity: '',
  screenshotShopType: '',
  screenshotShopName: '',
  screenshotGift: '',
})

const tableData = ref([]);
const selectedModels = ref([]);
const selectedModel = () => true;
const videoTableData = ref([]);

// 切换菜单展开/收起
// const toggleMenu = (menu: any) => {
//   if (expandedMenuId.value === menu.id) {
//     // 如果点击的是当前展开的菜单，则收起
//     expandedMenuId.value = null
//     menu.isExpanded = false
//   } else {
//     // 如果点击的是其他菜单，则收起当前展开的菜单，展开新点击的菜单
//     expandedMenuId.value = menu.id
//     // 将所有菜单设置为收起状态
//     page_menu_list.value.forEach((item: any) => {
//       item.isExpanded = item.id === menu.id
//     })
//   }
// }

const showChangeModel = () => {
  return [20, 21, 46, 27, 28, 29, 32, 33, 35, 36, 37].includes(selectModelId.value);
};

const showHandModel = () => {
  return handModel.value && [20, 21, 46, 27, 28, 29, 32, 33, 35, 36, 37].includes(selectModelId.value);
};

const handleModelSelectionChange = (val: any) => {
  selectedModels.value = val;
  console.log('选中的model行:', selectedModels.value);
  // 当模型选择变化时，清空生成的内容
  clearGeneratedContent();
}

// 综合清空函数
const clearAllData = () => {
  clearFormData();
  clearGeneratedContent();
  clearSelectedData();
  const id = selectModelId.value
  showFlag.value = id===55

  // 清空发布相关数据
  publishForm.value = {
    publishType: 'douyin',
    activityName: '',
    title: '',
    topic: [],
    mount: 'none',
    dataAcquisition: false,
    scanCodeLimit: 0,
    picnums: 0,
    poi1: '',
    poi2: '',
    poiSelect: '',
    miniId: '',
    miniTitle: '',
    miniPath: ''
  }

  // 清空二维码数据
  douyinQrCode.value = "";
  redBookAndroidQrCode.value = "";
  redBookIOSQrCode.value = "";

  // 清空城市数据
  cityData.value = [];

  // 清空任务名输入
  taskNameInput.value = '';

  // 清空表格数据
  tableData.value = [];

  // 重置手动选择模式
  handModel.value = false;
}

// 切换类别菜单展开/收起
const toggleCategoryMenu = (menu: any) => {
  // 将所有菜单设置为收起状态
  page_menu_list.value.forEach((item: any) => {
    item.isExpanded = item.id === menu.id ? !item.isExpanded : false;
  });
}

// 处理类别子项点击
const handleCategoryChildClick = (child: any) => {
  selectModelId.value = child.id;
  loadMubanByClassify(selectModelId.value);
  // 自动切换按钮
  if ([17, 38,55].includes(selectModelId.value)) {
    activeButton.value = 'original'
  } else {
    activeButton.value = 'keywords'
  }

  // 清空相关变量
  clearAllData();
}

// 清空表单数据
const clearFormData = () => {
  formData.value = {
    keywordsContent: '',
    originalContent: '',
    groupCity: '',
    groupShopType: '',
    groupShopName: '',
    groupSetMenuName: '',
    groupSetMenuContent: '',
    groupSetMenuPriceOld: '',
    groupSetMenuPriceNew: '',
    groupSellingPoint: '',
    personName: '',
    personAge: '',
    personHomeTown: '',
    personCity: '',
    personIndustry: '',
    personShopType: '',
    personShowName: '',
    personWorkInYear: '',
    personSellingPoint: '',
    screenshotCity: '',
    screenshotShopType: '',
    screenshotShopName: '',
    screenshotGift: '',
  }
}

// 清空生成的内容
const clearGeneratedContent = () => {
  streamContents.value = [];
  pictureContents.value = [];
}

// 清空选中的数据
const clearSelectedData = () => {
  selectVideoData.value = [];
  selectVideoDataIndex.value = [];
  selectAudioData.value = [];
  selectedModels.value = [];
  generateCount.value = 0;
  showFlag.value = false;
}

// 处理提取文案
// 要提交的数据结构
const getWenanData = reactive<any>({
  // 图片素材
  imgUrl: '',
  // 视频素材
  videoUrl: '',
  // 音频素材
  audioUrl: '',
  // 网页链接
  webUrl: '',
  // 视频时长
  duration: 0,
  // prompt
  prompt: '从链接中提取相应的文案内容',
})

function getVideoDuration(url) {
  return new Promise((resolve, reject) => {
    const video = document.createElement('video');
    video.src = url;

    video.addEventListener('loadedmetadata', () => {
      resolve(video.duration); // 返回秒数
    });

    video.addEventListener('error', (e) => {
      reject(new Error('无法获取视频时长'));
    });
  });
}

function getAudioDuration(url) {
  return new Promise((resolve, reject) => {
    const audio = new Audio();

    // 处理元数据加载
    audio.addEventListener('loadedmetadata', () => {
      resolve(audio.duration); // 返回音频时长（秒）
    });

    // 处理错误
    audio.addEventListener('error', (e) => {
      reject(new Error('无法获取音频时长: ' + e.message));
    });

    // 设置音频源
    audio.src = url;
  });
}

const handleExtractText = async () => {
  // 这里添加提取文案的逻辑
  console.log('提取文案')
  // 校验输入框的内容是否是一个合法链接
  if (!/^https?:\/\//.test(formData.value.originalContent)) {
    ElMessage.error('请输入一个合法的链接');
    return;
  }
  // 判断url的资源类型，视频、音频、图片或普通网页
  const url = formData.value.originalContent;
  const videoExtensions = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv'];
  const audioExtensions = ['mp3', 'wav', 'aac', 'flac', 'ogg'];
  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
  const videoExtension = videoExtensions.find(ext => url.toLowerCase().endsWith(ext));
  const audioExtension = audioExtensions.find(ext => url.toLowerCase().endsWith(ext));
  const imageExtension = imageExtensions.find(ext => url.toLowerCase().endsWith(ext));
  let serverUrl = 'api/aliyun_tongyi/bailian_duomo_tai/get_text';

  if (videoExtension) {
    getWenanData.imgUrl = '';
    getWenanData.audioUrl = '';
    getWenanData.videoUrl = url;
    // 从视频提取
    if (getWenanData.duration == 0) {
      // 尝试提取时长
      try {
        getWenanData.duration = await getVideoDuration(getWenanData.videoUrl)
      } catch (error) {
        console.log('视频时长提取失败');
        ElMessage.error('视频时长提取失败');
        return;
      }
    }
    if (getWenanData.duration > 40) {
      ElMessage.error('视频时长不能大于40秒');
      return;
    }
  } else if (audioExtension) {
    getWenanData.imgUrl = '';
    getWenanData.videoUrl = '';
    getWenanData.audioUrl = url;
    // 从视频提取
    if (getWenanData.duration == 0) {
      // 尝试提取时长
      try {
        getWenanData.duration = await getAudioDuration(getWenanData.audioUrl)
      } catch (error) {
        console.log('音频时长提取失败');
        ElMessage.error('音频时长提取失败');
        return;
      }
    }
    if (getWenanData.duration > 180) {
      ElMessage.error('音频时长不能大于180秒');
      return;
    }
  } else if (imageExtension) {
    getWenanData.videoUrl = '';
    getWenanData.audioUrl = '';
    getWenanData.imgUrl = url;
  } else {
    getWenanData.imgUrl = '';
    getWenanData.videoUrl = '';
    getWenanData.audioUrl = '';
    getWenanData.webUrl = url;
    serverUrl = 'api/aliyun_tongyi/bailian_duomo_tai/get_text_from_webpage';
  }
  const loadingInstance = ElLoading.service({
    lock: true,
    text: '文案提取中...',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  try {
    const response = await axiosUtil.post(serverUrl, getWenanData)
    if (response.data.code === 1 && response.data.data) {
      if (!imageExtension && !videoExtension && !audioExtension) {
        formData.value.originalContent = response.data.data.data.content;
      } else {
        formData.value.originalContent = response.data.data.data
      }
    } else {
      ElMessage.error(response.data.msg || '请求失败');
    }
  } catch (error) {
    console.log(error);
    ElMessage.error('请求失败');
  } finally {
    loadingInstance.close();
  }
}

const showUploadDialog = ref(false)

const handleUpload = () => {
  showUploadDialog.value = true
}

const showUploadIndexDialog = ref(false)

const handleUploadIndex = () => {
  showUploadIndexDialog.value = true
}

const showUploadAudio = ref(false)
const handleUploadAudio = () => {
  showUploadAudio.value = true
}


//处理正常请求https://qianwen1.zhanacun.com/api/aliyun_tongyi/qian_wen/get_index_max?
const getGenerateUrlDefault = (num : number) => {
  // 获取当前选中二级菜单的父菜单
  function findParentMenuByChildId(list, childId) {
    for (const parent of list) {
      if (parent.children) {
        for (const child of parent.children) {
          if (child.id === childId) {
            return parent;
          }
        }
      }
    }
    return null;
  }

  const parentMenu = findParentMenuByChildId(page_menu_list.value, selectModelId.value);
  let url = 'https://qianwen1.zhanacun.com/api/aliyun_tongyi/qian_wen/get_index_max?'
  const params = [];
  const currActiveButton = activeButton.value;
  // 拼接 question
  if (currActiveButton === 'original') {
    params.push('question=' + encodeURIComponent(formData.value.originalContent));
  } else {
    params.push('question=' + encodeURIComponent(formData.value.keywordsContent));
  }
  // 拼接 num
  params.push('num=' + num);
  // 拼接 types
  params.push('types=' + encodeURIComponent(parentMenu?.name || ''));
  // 拼接 format
  params.push('format=' + encodeURIComponent('标题 跟 内容'));
  // 拼接 original_keywords
  params.push('original_keywords=' + encodeURIComponent(currActiveButton === 'original' ? '原文' : '关键词'));
  params.push('keywords=' + null);
  // 拼接 model
  params.push('model=' + encodeURIComponent(selectModelId.value));
  // 拼接 token
  params.push('token=' + encodeURIComponent(LocalStorageUtil.get("token") || ''));
  // 拼接 storeid
  params.push('storeid=' + encodeURIComponent(LocalStorageUtil.get("id") || ''));
  url += params.join('&');
  console.log(url);
  return url;
}

//处理特殊请求，聊天视频https://qianwen2.zhanacun.com/api/aliyun_tongyi/qian_wen/get_index_max_lt
const getGenerateUrlSpecial = () => {
  let url = 'https://qianwen2.zhanacun.com/api/aliyun_tongyi/qian_wen/get_index_max_lt?'
  const params = [];
  const currActiveButton = activeButton.value;
  // 拼接 question
  if (currActiveButton === 'original') {
    params.push('question=' + encodeURIComponent(formData.value.originalContent));
  } else {
    params.push('question=' + encodeURIComponent(formData.value.keywordsContent));
  }
  // 拼接 num_chat
  params.push('num_chat=' + 1);
  params.push('user_chat=' + '小张,小李');

  // 拼接 token
  params.push('token=' + encodeURIComponent(LocalStorageUtil.get("token") || ''));
  // 拼接 storeid
  params.push('storeid=' + encodeURIComponent(LocalStorageUtil.get("id") || ''));
  url += params.join('&');
  console.log(url);
  return url;
}

//处理post请求，type团购种草1，新闻体2，截图挑战3
const getGenerateUrlPost = () => {
  const url = 'api/aliyun_tongyi/qian_wen/copywriting'
  const currShowType = showType.value
  const dataArr = []
  let type = null
  if (currShowType === 'keywords25') {
    type = 1
    const data = {
      city: formData.value.groupCity,
      store_type: formData.value.groupShopType,
      store_name: formData.value.groupShopName,
      package_name: formData.value.groupSetMenuName,
      package_content: formData.value.groupSetMenuContent,
      price: formData.value.groupSetMenuPriceOld,
      yh_price: formData.value.groupSetMenuPriceNew,
      sell_point: formData.value.groupSellingPoint
    }
    dataArr.push(data)
  }
  if (currShowType === 'keywords18') {
    type = 2
    const data = {
      name: formData.value.personName,
      age: formData.value.personAge,
      hometown: formData.value.personHomeTown,
      city: formData.value.personCity,
      industry: formData.value.personIndustry,
      shop_type: formData.value.personShopType,
      shop_name: formData.value.personShowName,
      work_in_year: formData.value.personWorkInYear,
      sell_point: formData.value.personSellingPoint
    }
    dataArr.push(data)
  }
  if (currShowType === 'keywords40') {
    type = 3
    const data = {
      city: formData.value.screenshotCity,
      store_type: formData.value.screenshotShopType,
      store_name: formData.value.screenshotShopName,
      gift: formData.value.screenshotGift
    }
    dataArr.push(data)
  }
  const params = {
    num: generateCount.value,
    // text: JSON.stringify(dataArr),
    text: encodeURIComponent(JSON.stringify(dataArr)),
    type: type
  }
  // 这里可以根据需要返回params或进行后续操作
  return {url, params};
}

//页面有两种处理方式，但是不知道哪一种是对的
const getGenerateUrlPostOther = () => {
  let url = 'https://qianwen1.zhanacun.com/api/aliyun_tongyi/qian_wen/get_index_max?'
  const currShowType = showType.value
  const dataArr = []
  if (currShowType === 'keywords25') {
    const data = {
      city: formData.value.groupCity,
      store_type: formData.value.groupShopType,
      store_name: formData.value.groupShopName,
      package_name: formData.value.groupSetMenuName,
      package_content: formData.value.groupSetMenuContent,
      price: formData.value.groupSetMenuPriceOld,
      yh_price: formData.value.groupSetMenuPriceNew,
      sell_point: formData.value.groupSellingPoint
    }
    dataArr.push(data)
  }
  if (currShowType === 'keywords18') {
    const data = {
      name: formData.value.personName,
      age: formData.value.personAge,
      hometown: formData.value.personHomeTown,
      city: formData.value.personCity,
      industry: formData.value.personIndustry,
      shop_type: formData.value.personShopType,
      shop_name: formData.value.personShowName,
      work_in_year: formData.value.personWorkInYear,
      sell_point: formData.value.personSellingPoint
    }
    dataArr.push(data)
  }
  if (currShowType === 'keywords40') {
    const data = {
      city: formData.value.screenshotCity,
      store_type: formData.value.screenshotShopType,
      store_name: formData.value.screenshotShopName,
      gift: formData.value.screenshotGift
    }
    dataArr.push(data)
  }

  // 获取当前选中二级菜单的父菜单
  function findParentMenuByChildId(list, childId) {
    for (const parent of list) {
      if (parent.children) {
        for (const child of parent.children) {
          if (child.id === childId) {
            return parent;
          }
        }
      }
    }
    return null;
  }

  const parentMenu = findParentMenuByChildId(page_menu_list.value, selectModelId.value);
  const params = [];
  const currActiveButton = activeButton.value;
  params.push('question=' + null);
  // 拼接 num
  params.push('num=' + 1);
  // 拼接 types
  params.push('types=' + encodeURIComponent(parentMenu?.name || ''));
  // 拼接 format
  params.push('format=' + encodeURIComponent('标题 跟 内容'));
  // 拼接 original_keywords
  params.push('original_keywords=' + encodeURIComponent(currActiveButton === 'original' ? '原文' : '关键词'));
  params.push('keywords=' + JSON.stringify(dataArr));
  // 拼接 model
  params.push('model=' + encodeURIComponent(selectModelId.value));
  // 拼接 token
  params.push('token=' + encodeURIComponent(LocalStorageUtil.get("token") || ''));
  // 拼接 storeid
  params.push('storeid=' + encodeURIComponent(LocalStorageUtil.get("id") || ''));
  url += params.join('&');
  console.log(url);
  return url;
}

const MAX_GENERATE_COUNT = 10;
const streamContents = ref<string[]>([]);
const streamContentsNumOld = ref(0)

// interface PictureContent {
//   id: number;
//   bg: string;
//   avatar: string;
//   likes: number;
//   comments: number;
//   favorites: number;
//   shares: number;
//   author: string;
//   desc: string;
//   url: string;
// }

const pictureContents = ref<PictureContent[]>([]);
const videoJsonData = ref("")
const handleViewVideo = (row: any) => {
  showViewVideoDialog.value = true
  videoJsonData.value = "https://zhjh168.com/aijianji/#/detail/"+row.project_id
  videoShowRef.value?.openThisPage()
}

const handleGenerate = async () => {
  streamContentsNumOld.value = streamContents.value.length
  // 不清空 pictureContents，保持现有数据
  pictureContents.value = []
  // 开启全局 loading
  const loadingInstance = ElLoading.service({
    lock: true,
    text: '生成中，请稍候...',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  try {
    //1判断是否选中视频模版
    if (!selectModelId.value) {
      ElMessage.error('请选择视频模版')
      return
    }
    //2判断form表单是否为空
    const currShowType = showType.value
    const currActiveButton = activeButton.value
    // 限制最大生成数量
    let count = Math.max(1, Math.min(Number(generateCount.value), MAX_GENERATE_COUNT));
    if (currShowType === 'keywords25') {
      if (!formData.value.groupCity || !formData.value.groupShopType || !formData.value.groupShopName || !formData.value.groupSetMenuName || !formData.value.groupSetMenuContent || !formData.value.groupSetMenuPriceOld || !formData.value.groupSetMenuPriceNew || !formData.value.groupSellingPoint) {
        ElMessage.error('请填写完整团购种草表单')
        return
      }
    } else if (currShowType === 'keywords18') {
      if (!formData.value.personName || !formData.value.personAge || !formData.value.personHomeTown || !formData.value.personCity || !formData.value.personIndustry || !formData.value.personShopType || !formData.value.personShowName || !formData.value.personWorkInYear || !formData.value.personSellingPoint) {
        ElMessage.error('请填写完整新闻体表单')
        return
      }
    } else if (currShowType === 'keywords40') {
      if (!formData.value.screenshotCity || !formData.value.screenshotShopType || !formData.value.screenshotShopName || !formData.value.screenshotGift) {
        ElMessage.error('请填写完整截图挑战表单')
        return
      }
    } else {
      if (currActiveButton === 'original') {
        if (!formData.value.originalContent) {
          ElMessage.error('请输入原文')
          return
        }
      } else {
        if (!formData.value.keywordsContent) {
          ElMessage.error('请输入关键词')
          return
        }
      }
    }
    //3判断生成数量是否大于1
    if (generateCount.value < 1) {
      ElMessage.error('请选择生成文案数量')
      return
    }

    //--------所有判断生效，以下是生成文案-------------
    let method = '';
    let url = '';
    let data = {};
    if(currShowType === 'keywords25'){
      method = 'get'
      url = getGenerateUrlPostOther()
    }else if(currShowType === 'keywords18'){
      const resData = getGenerateUrlPost()
      url = resData.url
      data = resData.params
      method = 'post'
    }else if(currShowType === 'keywords40'){
      const resData = getGenerateUrlPost()
      url = resData.url
      data = resData.params
      method = 'post'
    }else {
      method = 'get'
      url = selectModelId.value === 41 ? getGenerateUrlSpecial() : getGenerateUrlDefault(currActiveButton === 'original'?count:1);
    }
    if(currShowType === 'keywords18' || currShowType === 'keywords40'){
      const responsePost = await axiosUtil.post(url, data)
      if(responsePost.data.code===1){
        // 处理返回的文案数据
        if(responsePost.data.data && Array.isArray(responsePost.data.data)){
          // 清空现有的 streamContents
          // streamContents.value = [];
          // 将每个文案添加到 streamContents 中
          responsePost.data.data.forEach((item: any) => {
            if(item.text && item.text.trim()){
              streamContents.value.push(item.text.trim());
            }
          });
        }
      }
    }else {
      // 并发请求
      const requests = [];
      if (currActiveButton === 'original') {
        // 原文模式下，不清空现有数据，继续追加
        // streamContents.value = Array(1).fill('');
        requests.push(generateOne(streamContents.value.length, method, url, data, true)); // 原文模式下拆分文案，从现有长度开始
      } else {
        // 关键词模式下，不清空现有数据，继续追加
        // streamContents.value = Array(count).fill('');
        for (let i = 0; i < count; i++) {
          requests.push(generateOne(streamContents.value.length + i, method, url, data, false)); // 关键词模式下不拆分文案，从现有长度开始
        }
      }
      await Promise.all(requests);
    }
    //成功了
    ElMessage.success(calculateSuccess())
    streamContentsNumOld.value = 0
  } finally {
    // 关闭 loading
    loadingInstance.close()
  }
}

// 单次流式请求
const generateOne = async (index: number, method: string, url: string, data: any, shouldSplit: boolean = false) => {
  try {
    // 构建请求URL
    let requestUrl = url;
    if (method.toUpperCase() === 'GET' && data && Object.keys(data).length > 0) {
      const params = new URLSearchParams(data).toString();
      requestUrl += (url.includes('?') ? '&' : '?') + params;
    }

    // 对于POST请求，需要特殊处理，因为EventSource只支持GET
    if (method.toUpperCase() === 'POST') {
      // 如果是POST请求，将数据作为查询参数传递（需要后端支持）
      const params = new URLSearchParams(data).toString();
      requestUrl += (url.includes('?') ? '&' : '?') + params;
    }

    return new Promise((resolve, reject) => {
      const eventSource = new EventSource(requestUrl);

      eventSource.onmessage = (event) => {
        try {
          const obj = JSON.parse(event.data);
          if (obj.data && obj.data.message && obj.data.message.content) {
            const content = obj.data.message.content;

            // 只有在 shouldSplit 为 true 时才拆分文案
            if (shouldSplit && content.includes('\n')) {
              const contents = content.split('\n')
                  .filter(item => item.trim() !== '') // 过滤空字符串
                  .map(item => {
                    // 去掉文案前的数字符号（如 "1. ", "2. " 等）
                    return item.trim().replace(/^\d+\.\s*/, '');
                  });

              // 如果拆分的文案数量大于1，需要动态扩展 streamContents 数组
              if (contents.length > 1) {
                // 确保数组有足够的空间，但不要创建多余的空白框
                const neededLength = index + contents.length;
                if (streamContents.value.length < neededLength) {
                  // 只添加必要的空字符串，避免多余
                  for (let i = streamContents.value.length; i < neededLength; i++) {
                    streamContents.value.push('');
                  }
                }

                // 将拆分的文案分别存储到对应的位置
                contents.forEach((item, contentIndex) => {
                  if (item.trim()) {
                    streamContents.value[index + contentIndex] = item;
                  }
                });
              } else {
                // 只有一个文案的情况
                streamContents.value[index] = contents[0];
              }
            } else {
              // 没有换行符，正常存储
              streamContents.value[index] = content.trim().replace(/^\d+\.\s*/, '');
            }
          }
        } catch (e) {
          // 忽略解析错误
        }
      };

      eventSource.addEventListener('gpt_message', (event) => {
        try {
          const obj = JSON.parse(event.data);
          if (obj.data && obj.data.message && obj.data.message.content) {
            const content = obj.data.message.content;

            // 只有在 shouldSplit 为 true 时才拆分文案
            if (shouldSplit && content.includes('\n')) {
              const contents = content.split('\n')
                  .filter(item => item.trim() !== '') // 过滤空字符串
                  .map(item => {
                    // 去掉文案前的数字符号（如 "1. ", "2. " 等）
                    return item.trim().replace(/^\d+\.\s*/, '');
                  });

              // 如果拆分的文案数量大于1，需要动态扩展 streamContents 数组
              if (contents.length > 1) {
                // 确保数组有足够的空间，但不要创建多余的空白框
                const neededLength = index + contents.length;
                if (streamContents.value.length < neededLength) {
                  // 只添加必要的空字符串，避免多余
                  for (let i = streamContents.value.length; i < neededLength; i++) {
                    streamContents.value.push('');
                  }
                }

                // 将拆分的文案分别存储到对应的位置
                contents.forEach((item, contentIndex) => {
                  if (item.trim()) {
                    streamContents.value[index + contentIndex] = item;
                  }
                });
              } else {
                // 只有一个文案的情况
                streamContents.value[index] = contents[0];
              }
            } else {
              // 没有换行符，正常存储
              streamContents.value[index] = content.trim().replace(/^\d+\.\s*/, '');
            }
          }
        } catch (e) {
          // 忽略解析错误
        }
      });

      eventSource.addEventListener('gpt_success', (event) => {
        eventSource.close();
        resolve(true);
        console.log('请求成功');
      });

      eventSource.onerror = (error) => {
        eventSource.close();
        ElMessage.error(calculateSuccess())
        reject(error);
      };

      /* // 设置超时处理
       setTimeout(() => {
         eventSource.close();
         // 只有在对应位置没有内容时才设置为"请求超时"
         if (!streamContents.value[index] || streamContents.value[index].trim() === '') {
           // streamContents.value[index] = '请求超时';
           streamContents.value.splice(index, 1);
         }
         console.log('请求超时');
         resolve(false);
       }, 60000); // 60秒超时*/
    });
  } catch (e) {
    // streamContents.value[index] = '请求出错：' + e;
    ElMessage.error(calculateSuccess())
  }
}

const calculateSuccess = () =>{
  const success = streamContents.value.length - streamContentsNumOld.value
  const failed = generateCount.value - success
  return "生成完毕，总共生成："+generateCount.value+"条,成功："+success+"条，失败："+failed+"条"
}

// 处理视频库点击
const handleVideoLibrary = () => {
  router.push('/videoWarehouse')
  // 跳转前清空当前页面的数据
  clearAllData();
}

const streamContent = ref('');

onMounted(() => {
  initWebsiteBgUrl()
  initPageMenuList()

  // 初始化时清空所有数据
  clearAllData();
})

//读取配置，获取网站背景图
const initWebsiteBgUrl = async () => {
  const response = await axiosUtil.post('api/pc/site/get_agent_config', {})
  if (response.data.code === 0 && response.data.data) {
    website_bg_url.value = import.meta.env.VITE_APP_SERVER + response.data.data.website_bg || ''
  }
}

// 获取本页菜单
const initPageMenuList = async () => {
  const response = await axiosUtil.post('api/storeintopieces/classifylist', {})
  if (response.data.code === 1 && response.data.data) {
    page_menu_list.value = response.data.data
    page_menu_list.value.map(l => {
      l.value = l.id;
      l.label = l.name;
      l.isExpanded = false; // 添加展开状态属性
      if (l.child) {
        l.children = l.child.map(c => {
          c.value = c.id;
          c.label = c.name;
          return c;
        })
      }
      return l;
    })
  }
}

// 根据分类选择
const loadMubanByClassify = async (classifyid) => {
  const response = await axiosUtil.post('api/muban_api/mubanlist', {
    classify_id: classifyid
  });
  if (response.data.code === 1 && response.data.data) {
    tableData.value = response.data.data.map(d => {
      let a: any = {}
      a.name = d.title;
      a.id = d.id;
      a.project_id = d.project_id;
      return a;
    });
  }

}

// 新增+按钮事件
const onPlusClick = () => {
  // 这里可以自定义弹窗或其他逻辑
  // 添加新的内容项
  streamContents.value.push('');
}

const removeContent = (idx: number) => {
  streamContents.value.splice(idx, 1);
  // 如果删除后没有内容了，清空图片内容
  if (streamContents.value.length === 0) {
    pictureContents.value = [];
  }
};

const showFlag = ref(false)

const showType = computed(() => {
  const id = selectModelId.value
  showFlag.value = id===55
  if (id === 17 || id === 38 || id === 55) {
    return 'originalOnly'
  }
  if (id === 41) {
    return 'keywordsOnly'
  }
  if (id === 25) {
    return 'keywords25'
  }
  if (id === 18) {
    return 'keywords18'
  }
  if (id === 40) {
    return 'keywords40'
  }
  return 'default'
})

const showTaskNameDialog = ref(false);
const taskNameInput = ref('');

// 新增生成视频按钮事件
const handleGenerateVideo = () => {
  showTaskNameDialog.value = true;
  // 生成视频前清空任务名
  taskNameInput.value = '';
};

// 发布设置弹窗处理方法
const handlePublishConfirm = async () => {
  console.log('发布设置确认', publishForm.value)
  let videos = ''
  let arr = []
  if (pictureContents.value.length > 0) {
    pictureContents.value.forEach(video => {
      arr.push(video.url)
    })
  } else {
    ElMessage.warning('请先生成视频')
    return
  }
  videos = arr.join(",")

  // TODO: 在这里处理发布逻辑
  let url = ''
  let data: any = {
    "title": publishForm.value.activityName,
    "video_text": publishForm.value.title,
    "video_text_keyword": publishForm.value.topic,
    "platform_type": "none",
    "micro_app_info": {
      "micro_app_id": "",
      "micro_app_title": "",
      "micro_app_url": ""
    },
    "open_data": publishForm.value.dataAcquisition ? 1 : 0,
    "video_list": videos,
    "max_release_num": publishForm.value.scanCodeLimit,
    "type": "video",
    "photos": "",
    "photos_num": publishForm.value.picnums,
    "id": ""
  }

  if (publishForm.value.publishType === 'douyin') {
    url = 'api/scan_publish/douyin/save';
    // 处理POI挂载
    if (publishForm.value.mount === 'poi') {
      if (!publishForm.value.poiSelect) {
        ElMessage.warning("请先选择数据")
        return
      } else {
        const selectArr = cityData.value.find(item => item.value === publishForm.value.poiSelect)
        if (selectArr) {
          data.mount_type = 'poi'
          data.poi_id = selectArr.value
          data.poi_name = selectArr.label
        }
      }
    }

    // 处理小程序挂载
    if (publishForm.value.mount === 'miniprogram') {
      if (!publishForm.value.miniId) {
        ElMessage.warning("请先输入小程序ID")
        return
      }
      if (!publishForm.value.miniTitle) {
        ElMessage.warning("请先输入标题")
        return
      }
      if (!publishForm.value.miniPath) {
        ElMessage.warning("请先输入路径")
        return
      }
      data.mount_type = 'mini_program'
      data.micro_app_info.micro_app_id = publishForm.value.miniId
      data.micro_app_info.micro_app_title = publishForm.value.miniTitle
      data.micro_app_info.micro_app_url = publishForm.value.miniPath
    }
  } else {
    url = 'api/scan_publish/xhs/save'
  }

  try {
    const response = await axiosUtil.post(url, data)
    if (response.data.code === 1) {
      ElMessage.success(response.data.msg)
      const qr_code = response.data.data.qr_code
      if (publishForm.value.publishType === 'douyin') {
        // 将地址转换为二维码图片
        douyinQrCode.value = await generateQRCode(qr_code)
      } else {
        // 将地址转换为二维码图片
        redBookAndroidQrCode.value = await generateQRCode(qr_code.android)
        redBookIOSQrCode.value = await generateQRCode(qr_code.ios)
      }
      showQrCodeDialog.value = true
      showPublishDialog.value = false
    } else {
      ElMessage.error(response.data.msg)
    }
  } catch (error) {
    ElMessage.error('发布失败，请重试')
  }
}

const handlePublishCancel = () => {
  showPublishDialog.value = false
  // 重置表单
  publishForm.value = {
    publishType: 'douyin',
    activityName: '',
    title: '',
    topic: [], // Reset to empty array for InputTag
    mount: 'none',
    dataAcquisition: true,
    scanCodeLimit: 0,
    picnums: 0,
    // POI相关字段
    poi1: '',
    poi2: '',
    poiSelect: '',
    // 小程序相关字段
    miniId: '',
    miniTitle: '',
    miniPath: ''
  }

  // 清空城市数据
  cityData.value = [];
}

const handleQrCodeConfirm = () => {
  publishForm.value = {
    publishType: 'douyin',
    activityName: '',
    title: '',
    topic: [], // Reset to empty array for InputTag
    mount: 'none',
    dataAcquisition: true,
    scanCodeLimit: 0,
    picnums: 0,
    // POI相关字段
    poi1: '',
    poi2: '',
    poiSelect: '',
    // 小程序相关字段
    miniId: '',
    miniTitle: '',
    miniPath: ''
  }
  douyinQrCode.value = ""
  redBookAndroidQrCode.value = ""
  redBookIOSQrCode.value = ""
  showQrCodeDialog.value = false;

  // 清空城市数据
  cityData.value = [];
}

const handleChooseCityKeyWord = async () => {
  if (!publishForm.value.poi1) {
    ElMessage.warning("请输入关键词")
    return
  }
  if (!publishForm.value.poi2) {
    ElMessage.warning("请输入城市")
    return
  }
  try {
    const res = await axiosUtil.post('api/scan_publish/douyin/search_poi', {
      "keyword": publishForm.value.poi1,
      "city": publishForm.value.poi2
    })
    if (res.data.code) {
      cityData.value = []
      res.data.code.forEach(item => {
        const son = {
          value: item.poi_id,
          label: item.province + item.city + item.district + item.address,
        }
        cityData.value.push(son)
      })
    }
  } catch (error) {
    ElMessage.error('搜索POI失败，请重试')
  }
}

// 发布视频事件
const handlePublicVideo = () => {
  console.log('点击授权发布按钮')
  showPublishDialog.value = true
  // 发布前清空之前的二维码数据
  douyinQrCode.value = "";
  redBookAndroidQrCode.value = "";
  redBookIOSQrCode.value = "";
}

const handleTaskNameConfirm = () => {
  if (!taskNameInput.value.trim()) {
    ElMessage.error('请输入任务名');
    return;
  }
  showTaskNameDialog.value = false;
  doGenerateVideo(taskNameInput.value.trim());
  taskNameInput.value = '';
};

const handleTaskNameCancel = () => {
  showTaskNameDialog.value = false;
  taskNameInput.value = '';
};

const doGenerateVideo = (taskName) => {
  const curSelectVideoData = selectVideoData.value
  const curSelectVideoDataIndex = selectVideoDataIndex.value
  const curSelectAudioData = selectAudioData.value
  if (curSelectVideoData && curSelectVideoData.length>0) {
    const audioUrl = []
    if(showFlag && curSelectAudioData){
      curSelectAudioData.forEach(value => {
        const audioData = {
          url : value.url,
          duration: value.duration
        }
        audioUrl.push(audioData)
      })
    }
    const videoUrl = []
    curSelectVideoData.forEach(value => {
      const videoData = {
        "url": value.url,
        "url_image": value.url_image,
        "mediaId": value.mediaId,
        "width": value.width,
        "height": value.height,
        "duration": value.duration,
        "type": value.mimetype
      }
      videoUrl.push(videoData)
    })
    const videoUrlIndex = []
    if(showFlag && curSelectVideoDataIndex){
      curSelectVideoDataIndex.forEach(value => {
        const videoData = {
          "url": value.url,
          "url_image": value.url_image,
          "mediaId": value.mediaId,
          "width": value.width,
          "height": value.height,
          "duration": value.duration,
          "type": value.mimetype
        }
        videoUrlIndex.push(videoData)
      })
    }
    const videoText = []
    streamContents.value.map(s => {
      const videoTextData = {
        value: s
      }
      videoText.push(videoTextData)
    })

    let loadingTexts = [
      '内容读取中',
      '素材提取中',
      '专场滤镜匹配中',
      'AI生成中',
      '预计一两分钟',
      '卡点特效匹配中'
    ];
    let loadingIndex = 0;
    let videoLoadingInstance = ElLoading.service({
      lock: true,
      text: loadingTexts[0],
      background: 'rgba(0, 0, 0, 0.7)'
    });
    let loadingTextTimer = setInterval(() => {
      loadingIndex = (loadingIndex + 1) % loadingTexts.length;
      if (videoLoadingInstance) videoLoadingInstance.setText(loadingTexts[loadingIndex]);
    }, 1200);
    let selMubans = '';
    if (showHandModel()) {
      selMubans = selectedModels.value.map(m => m.id).join(',')
    }
    // axiosUtil.post('api/storeintopieces/add', {
    axiosUtil.post('api/storeintopieces/add', {
      classify: selectModelId.value,
      keywords: "",
      ossnum: videoText.length,
      theOriginal: "",
      title: taskName,
      video_text: encodeURIComponent(JSON.stringify(videoText)),
      video_url: encodeURIComponent(JSON.stringify(videoUrl)),
      index_url: encodeURIComponent(JSON.stringify(videoUrlIndex)),
      audio_url: encodeURIComponent(JSON.stringify(audioUrl)),
      sel_mubans: selMubans,
    }).then(response => {
      if (response.data.code === 1) {
        const id = response.data.data.id;
        let timer = setInterval(() => {
          axiosUtil.post('api/storeintopieces/list', {
            id: id,
            limit: "",
            offset: "1",
            status: "",
            type: "2"
          }).then(responseSon => {
            streamContents.value = [];
            if (responseSon.data.data.data.status !== 1) {
              const arr = responseSon.data.data.rows
              arr.forEach(picData => {
                if (picData.id && picData.id!=='undefined') {
                  const picShow = {
                    id: picData.id,
                    bg: picData.video_url_image,
                    avatar: 'https://img2.baidu.com/it/u=2328777830,2201725034&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
                    likes: 9999,
                    comments: 9999,
                    favorites: 9999,
                    shares: 9999,
                    author: '@智慧AI测试',
                    desc: picData.text,
                    url: picData.video_url
                  }
                  const idx = pictureContents.value.findIndex(item => item.id === picData.id);
                  if (idx !== -1) {
                    pictureContents.value[idx] = picShow;
                  } else {
                    pictureContents.value.push(picShow);
                  }
                }
              })
            }
            if (responseSon.data.data.data.status === 3) {
              console.log("===============================================")
              console.log(pictureContents.value)
              clearInterval(timer);
              clearInterval(loadingTextTimer);
              if (videoLoadingInstance) videoLoadingInstance.close();
              // 可以在这里做后续处理，比如提示用户
              ElMessage.success('生成视频成功');
            }
          })
        }, 3000);
      } else {
        clearInterval(loadingTextTimer);
        if (videoLoadingInstance) videoLoadingInstance.close();
        ElMessage.error('生成视频出错');
      }
    })
  } else {
    ElMessage.error('请先上传素材');
  }
}

const sourceVideoNewRef = ref();

// 发布设置弹窗相关
const showPublishDialog = ref(false)
const publishForm = ref({
  publishType: 'douyin', // douyin 或 xiaohongshu
  activityName: '',
  title: '',
  topic: [], // Changed to array for InputTag
  mount: 'none', // none, poi, miniprogram
  dataAcquisition: false,
  scanCodeLimit: 0,
  picnums: 0,
  // POI相关字段
  poi1: '',
  poi2: '',
  poiSelect: '',
  // 小程序相关字段
  miniId: '',
  miniTitle: '',
  miniPath: ''
})

const cityData = ref([])

// 二维码相关
const showQrCodeDialog = ref(false)
const douyinQrCode = ref("")
const redBookAndroidQrCode = ref("")
const redBookIOSQrCode = ref("")

// 生成二维码的函数
const generateQRCode = async (text: string): Promise<string> => {
  try {
    const qrCodeDataUrl = await QRCode.toDataURL(text, {
      width: 200,
      margin: 2,
      color: {
        dark: '#000000',
        light: '#FFFFFF'
      }
    })
    return qrCodeDataUrl
  } catch (error) {
    console.error('生成二维码失败:', error)
    return ''
  }
}

function handleUploadConfirm() {
  // 获取子组件暴露的选中数据
  if (sourceVideoNewRef.value && sourceVideoNewRef.value.getFinnishedSelect()) {
    selectVideoData.value = sourceVideoNewRef.value.getFinnishedSelect();
  }
  showUploadDialog.value = false;
  console.log(selectVideoData.value)

  // 清空生成的内容，因为素材已更新
  // clearGeneratedContent();
}

const sourceVideoNewIndexRef = ref(null)
function handleUploadIndexConfirm() {
  // 获取子组件暴露的选中数据
  if (sourceVideoNewIndexRef.value && sourceVideoNewIndexRef.value.getFinnishedSelect()) {
    selectVideoDataIndex.value = sourceVideoNewIndexRef.value.getFinnishedSelect();
  }
  showUploadIndexDialog.value = false;

  // 清空生成的内容，因为素材已更新
  // clearGeneratedContent();
}

const sourceAudioNewRef = ref(null);
function handleUploadConfirmAudio() {
  // 获取子组件暴露的选中数据
  if (sourceAudioNewRef.value && sourceAudioNewRef.value.getSelectMateriaAll()) {
    selectAudioData.value = sourceAudioNewRef.value.getSelectMateriaAll();
  }
  showUploadAudio.value = false;
  console.log(selectAudioData.value)

  // 清空生成的内容，因为素材已更新
  // clearGeneratedContent();
}

// 处理按钮切换
const handleButtonSwitch = (buttonType: string) => {
  activeButton.value = buttonType;
  // 切换按钮时清空对应的表单内容
  if (buttonType === 'keywords') {
    formData.value.originalContent = '';
  } else {
    formData.value.keywordsContent = '';
  }
  // 清空生成的内容
  clearGeneratedContent();
}

// 处理生成数量变化
const handleGenerateCountChange = (value: number) => {
  generateCount.value = value;
  // 当生成数量变化时，清空已生成的内容
  // clearGeneratedContent();
}

// 处理重置按钮
const handleReset = () => {
  ElMessage.success('已重置所有数据');
  clearAllData();
}

// 在现有的 ref 变量声明区域添加（大约在第1825行附近，与其他弹窗状态变量一起）
const showViewVideoDialog = ref(false)

const videoShowRef = ref(null)
// 预览视频弹窗确认事件
const handleViewVideoConfirm = () => {
  showViewVideoDialog.value = false;
  // 在这里添加你的确认逻辑
  videoShowRef.value?.closeThisPage()
}

// 预览视频弹窗取消事件
const handleViewVideoCancel = () => {
  showViewVideoDialog.value = false;
  // 在这里添加你的取消逻辑
  videoShowRef.value?.closeThisPage()
}

</script>

<style scoped>
.son-page-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.main-container {
  height: 100vh;
  width: 100%;
  backdrop-filter: blur(5px);
}

.header-container {
  padding: 0;
  width: 100%;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.1)"');
  backdrop-filter: blur(10px);
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  box-shadow: 0 4px 6px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.1)"');
}

.el-main {
  padding: 20px;
  height: 85vh;
  overflow-x: hidden;
}

.el-row {
  height: 100%;
  margin: 0 !important;
}

.el-col {
  height: 100%;
}

.area-container-sec {
  height: calc(100% - 80px) !important;
}

.area-container {
  height: 100%;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.1)"');
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  box-shadow: 0 4px 6px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.1)"');
  transition: all 0.3s ease;
  padding: 15px;
}

.area-container:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.15)" : "rgba(255, 255, 255, 0.15)"');
  box-shadow: 0 6px 12px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.15)" : "rgba(0, 0, 0, 0.15)"');
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.3)"');
}

.menu-container {
  overflow-y: auto;
}

.menu-title {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  padding: 0;
  margin: 0;
  border: none;
}

.sub-menu-title {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 0;
  margin-bottom: 10px;
  text-align: left;
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
}

.center-area, .right-area {
  min-height: 70vh;
}

.menu-container::-webkit-scrollbar {
  width: 6px;
}

.menu-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.menu-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.menu-item {
  margin-bottom: 15px;
}

.parent-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.1)"');
  backdrop-filter: blur(10px);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  color: #fff;
  font-weight: 500;
  box-shadow: 0 4px 6px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.1)"');
}

.parent-menu:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  transform: translateY(-2px);
  box-shadow: 0 6px 12px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.15)" : "rgba(0, 0, 0, 0.15)"');
}

.expand-icon {
  transition: transform 0.3s ease;
  color: #fff;
}

.expand-icon.is-expanded {
  transform: rotate(180deg);
}

.child-menu {
  margin-top: 8px;
  padding: 5px;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.child-item {
  padding: 10px 15px;
  margin: 8px 0;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.1)"');
  backdrop-filter: blur(10px);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  color: #fff;
  font-size: 0.95em;
  text-align: center;
  box-shadow: 0 2px 4px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.1)"');
}

.child-item:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  transform: translateY(-2px);
  box-shadow: 0 4px 8px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.15)" : "rgba(0, 0, 0, 0.15)"');
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.4)" : "rgba(255, 255, 255, 0.4)"');
}

.child-item:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.child-item.selected {
  background: rgba(64, 158, 255, 0.3);
  border-color: rgba(64, 158, 255, 0.5);
  color: #fff;
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.2);
}

.center-content {
  height: 100%;
  padding: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.center-content::-webkit-scrollbar {
  width: 6px;
}

.center-content::-webkit-scrollbar-thumb {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.3)"');
  border-radius: 3px;
}

.center-content::-webkit-scrollbar-thumb:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.5)" : "rgba(255, 255, 255, 0.5)"');
}

.center-content::-webkit-scrollbar-track {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.1)"');
  border-radius: 3px;
}

/* 模板选择区域样式 */
.template-section {
  margin-bottom: 15px;
}

.template-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

.template-header .sub-menu-title {
  margin-bottom: 0;
  border-bottom: none;
  flex: 1;
  padding: 0;
}

.template-header .el-switch {
  --el-switch-on-color: rgba(64, 158, 255, 0.8);
  --el-switch-off-color: rgba(255, 255, 255, 0.3);
}

.template-table-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.template-table-section .modelTable {
  width: 100%;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  --el-table-row-hover-bg-color: rgba(255, 255, 255, 0.2)!important;
}

.template-table-section .modelTable :deep(.el-table__header) {
  background: rgba(255, 255, 255, 0.15);
}

.template-table-section .modelTable :deep(.el-table__body) {
  background: rgba(255, 255, 255, 0.05);
}

.template-table-section .modelTable :deep(.el-table__row) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.template-table-section .modelTable :deep(.el-table__row:hover) {
  background: rgba(255, 255, 255, 0.2);
}

.template-table-section .modelTable :deep(.el-table__cell) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
}

.template-table-section .modelTable :deep(.el-checkbox__inner) {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.template-table-section .modelTable :deep(.el-checkbox__inner.is-checked) {
  background: rgba(64, 158, 255, 0.8);
  border-color: rgba(64, 158, 255, 0.8);
}

.template-table-section .modelTable :deep(.el-table__body-wrapper) {
  overflow-y: auto;
}

.template-table-section .modelTable :deep(.el-table__body-wrapper::-webkit-scrollbar) {
  width: 6px;
}

.template-table-section .modelTable :deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.template-table-section .modelTable :deep(.el-table__body-wrapper::-webkit-scrollbar-thumb:hover) {
  background: rgba(255, 255, 255, 0.5);
}

.template-table-section .modelTable :deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}



.button-group {
  display: flex;
  gap: 0;
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.1)"');
  padding: 4px;
  border-radius: 6px;
  box-shadow: inset 0 2px 4px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.1)"');
  margin-bottom: 15px;
  flex-shrink: 0;
}

.button-group .el-button {
  border-radius: 0;
  margin: 0;
  flex: 1;
  height: 40px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255);
}

.button-group .el-button:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.button-group .el-button:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.button-group .el-button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.button-group .el-button.el-button--primary {
  background: rgba(64, 158, 255, 0.2);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.button-group .el-button.el-button--primary:hover {
  background: rgba(64, 158, 255, 0.3);
}

.button-group .el-button.el-button--default {
  background: transparent;
  color: rgba(255, 255, 255);
}

.button-group .el-button.el-button--default:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.text-area-container {
  position: relative;
  width: 100%;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.05)" : "rgba(255, 255, 255, 0.05)"');
  border-radius: 8px;
  padding: 2px;
  box-shadow: inset 0 2px 4px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.1)"');
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
  overflow-y: auto;
  min-height: fit-content;
  max-height: 300px;
}

.text-area-container::-webkit-scrollbar {
  width: 6px;
}

.text-area-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.text-area-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.extract-link {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: rgba(64, 158, 255, 0.8);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
  z-index: 1;
}

.extract-link:hover {
  color: #409EFF;
  background: rgba(64, 158, 255, 0.1);
}

.text-area {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.text-area :deep(.el-textarea__inner) {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  font-size: 14px;
  line-height: 1.5;
  height: 100% !important;
  resize: none;
}

.text-area :deep(.el-textarea__inner:focus) {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.text-area :deep(.el-textarea__inner::placeholder) {
  color: rgba(255, 255, 255, 0.6);
}

/* 类别选择菜单样式 */
.category-menu {
  margin-bottom: 15px;
}

.category-menu-item {
  margin-bottom: 12px;
}

.category-parent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.15)" : "rgba(255, 255, 255, 0.15)"');
  backdrop-filter: blur(10px);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.25)" : "rgba(255, 255, 255, 0.25)"');
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 4px 12px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.15)" : "rgba(0, 0, 0, 0.15)"');
}

.category-parent:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.25)" : "rgba(255, 255, 255, 0.25)"');
  transform: translateY(-2px);
  box-shadow: 0 8px 20px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.2)" : "rgba(0, 0, 0, 0.2)"');
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.4)" : "rgba(255, 255, 255, 0.4)"');
}

.category-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.category-expand-icon {
  transition: transform 0.3s ease;
  color: #fff;
  font-size: 16px;
}

.category-expand-icon.is-expanded {
  transform: rotate(180deg);
}

.category-children {
  margin-top: 8px;
  padding: 8px;
  animation: slideDown 0.3s ease;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.08)" : "rgba(255, 255, 255, 0.08)"');
  border-radius: 8px;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.15)" : "rgba(255, 255, 255, 0.15)"');
}

.category-child-item {
  padding: 12px 16px;
  margin: 6px 0;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.12)" : "rgba(255, 255, 255, 0.12)"');
  backdrop-filter: blur(10px);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  box-shadow: 0 2px 6px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.1)"');
}

.category-child-item:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  transform: translateY(-1px);
  box-shadow: 0 4px 12px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.15)" : "rgba(0, 0, 0, 0.15)"');
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.35)" : "rgba(255, 255, 255, 0.35)"');
}

.category-child-item:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.category-child-item.selected {
  background: rgba(64, 158, 255, 0.4);
  border-color: rgba(64, 158, 255, 0.6);
  color: #fff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  font-weight: 600;
}

.modelTable {
  width: 100%;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
}

.modelTable tr {
  background: rgba(255, 255, 255, 0.1);
}

.group-form {
  padding: 15px;
  height: 100%;
}

.group-form :deep(.el-form-item) {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.group-form :deep(.el-form-item__label) {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  padding-right: 12px;
  text-align: right;
}

.group-form :deep(.el-form-item__content) {
  flex: 1;
}

.group-form :deep(.el-input__inner) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.1)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  color: #fff;
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  font-size: 14px;
  line-height: 1.5;
  height: 36px;
  padding: 0 12px;
  border-radius: 6px;
}

.group-form :deep(.el-input__inner:hover) {
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.3)"');
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.15)" : "rgba(255, 255, 255, 0.15)"');
}

.group-form :deep(.el-input__inner:focus) {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(64, 158, 255, 0.5);
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.group-form :deep(.el-input__inner::placeholder) {
  color: rgba(255, 255, 255, 0.5);
}

.group-form :deep(.el-input__wrapper) {
  background: transparent !important;
  box-shadow: none !important;
}

.group-form :deep(.el-input__wrapper.is-focus) {
  box-shadow: none !important;
}

.group-form :deep(.el-input) {
  --el-input-bg-color: transparent;
  --el-input-border-color: transparent;
  --el-input-hover-border-color: transparent;
  --el-input-focus-border-color: transparent;
}

.upload-section {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  padding: 10px 0;
}

.selected-count {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.generate-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px 0;
  flex: 1;
  align-items: flex-start;
}

.counter-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

.generate-button {
  width: auto;
  height: 32px;
  margin-top: 15px;
}

/* 新增控制行样式 */
.control-row {
  padding: 15px 0;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.control-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.control-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: flex-start;
}

.control-item:last-child {
  justify-content: flex-end;
}

.control-label {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.control-count {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  white-space: nowrap;
}

.control-item .el-button {
  height: 32px;
  font-size: 12px;
}

.control-item .el-input-number {
  width: 120px;
}

.control-item .el-input-number :deep(.el-input__inner) {
  height: 32px;
  font-size: 12px;
}

.title-row {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 0;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.disclaimer-text {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  line-height: 1.5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.spacer {
  height: 80px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* padding: 0 20px; */
  /* margin-top: 3vh; */
}

.content-nav {
  height: 100%;
  width: 100%;
  display: flex;
  /* justify-content: flex-end; */
  align-items: center;
  /* padding: 0 20px; */
  background: transparent;
  border: none;
  box-shadow: none;
}

.nav-right {
  display: flex;
  align-items: start;
  width: 100%;
  height: 100%;
  padding-bottom: 12px;
}

.nav-btn {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.1)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  color: #fff;
  padding: 12px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 100%;
}

.nav-btn:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.3)"');
  box-shadow: 0 0 10px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
}

.btn-icon {
  font-size: 16px;
}

.wechat-input-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-right: 8px;
}

.wechat-input-wrapper {
  position: relative;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e6eb;
  padding: 20px 20px 54px 20px;
  margin-top: 16px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.wechat-textarea {
  width: 100%;
  min-height: 60px;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: #222;
  font-size: 15px;
  line-height: 1.6;
  font-family: inherit;
  padding: 8px 12px;
  box-sizing: border-box;
  border-radius: 8px;
  transition: box-shadow 0.2s;
}

.wechat-textarea::placeholder {
  color: #bfbfbf;
}

.wechat-textarea:focus {
  background: #f5f6fa;
  box-shadow: 0 0 0 2px #409eff33;
}

.wechat-input-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 8px 16px;
  box-sizing: border-box;
}

.wechat-delete-btn {
  background: none;
  border: none;
  color: #8a8f99;
  font-size: 15px;
  cursor: pointer;
  padding: 0 8px;
  border-radius: 4px;
  transition: background 0.2s;
}

.wechat-delete-btn:hover {
  background: #f5f5f5;
}

.wechat-input-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wechat-char-count {
  color: #bfbfbf;
  font-size: 13px;
}

.wechat-plus-btn {
  background: #f5f6fa;
  border: none;
  color: #409eff;
  font-size: 22px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.wechat-plus-btn:hover {
  background: #e6f0ff;
}

.area-container.right-area {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.area-container.right-area::-webkit-scrollbar {
  width: 6px;
}

.area-container.right-area::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.area-container.right-area::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.area-container.right-area::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.title-row {
  flex-shrink: 0;
}

.wechat-input-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-right: 8px;
}

.wechat-textarea::-webkit-scrollbar {
  width: 6px;
}

.wechat-textarea::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.wechat-textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.wechat-textarea::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.generate-video-bottom {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

.wechat-list-main {
  overflow-y: auto;
}

.wechat-list-main::-webkit-scrollbar {
  width: 6px;
}

.wechat-list-main::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.wechat-list-main::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.wechat-list-main::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.image-box {
  position: relative;
  width: 100%;
  aspect-ratio: 9/16;
  min-height: 320px;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.image-box-topbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.32);
  z-index: 3;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 15px;
  gap: 8px;
}

.topbar-left, .topbar-right {
  display: flex;
  align-items: center;
}

.topbar-center {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.topbar-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
}

.image-box-actions {
  position: absolute;
  right: 8px;
  bottom: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 2;
}

.image-box-actions .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  margin-bottom: 4px;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-size: 16px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.action-btn span {
  font-size: 12px;
  margin-top: 1px;
}

.image-box-actions .el-icon {
  font-size: 20px;
}

.image-box-bottom {
  width: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 80%, rgba(0, 0, 0, 0.1) 100%);
  padding: 8px 10px 8px 10px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.bottom-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bottom-avatar {
  flex: 0 0 15%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.bottom-avatar .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
}

.image-box-bottom .author {
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-box-bottom .desc {
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  max-height: 2.6em;
}

@media (max-width: 600px) {
  .image-box-topbar {
    font-size: 12px;
    height: 28px;
    padding: 0 4px;
  }

  .topbar-text {
    font-size: 12px;
  }

  .image-box-actions .avatar, .bottom-avatar .avatar {
    width: 24px;
    height: 24px;
  }

  .action-btn {
    font-size: 12px;
  }

  .action-btn span {
    font-size: 10px;
  }

  .image-box-bottom {
    padding: 4px 4px 4px 4px;
  }

  .image-box-bottom .author {
    font-size: 11px;
  }

  .image-box-bottom .desc {
    font-size: 10px;
  }
}

.task-name-dialog :deep(.el-dialog__header) {
  background: rgba(30, 34, 44, 0.85);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.task-name-dialog :deep(.el-dialog__body) {
  background: rgba(30, 34, 44, 0.85);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  padding: 32px 24px 16px 24px;
  color: #fff;
}

.task-name-dialog-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.task-name-input {
  width: 100%;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  margin-bottom: 12px;
}

.task-name-tip {
  color: #bfc6d1;
  font-size: 13px;
  margin-top: 2px;
  text-align: left;
  width: 100%;
}

.task-name-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding: 0 8px 8px 8px;
}

.task-name-dialog :deep(.el-dialog__footer) {
  background: rgba(30, 34, 44, 0.85);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

/* 发布设置弹窗样式 */
.publish-form {
  padding: 20px;
}

.form-section {
  margin-bottom: 24px;
}

.section-label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.publish-type-buttons {
  display: flex;
  gap: 12px;
}

.type-btn {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid #dcdfe6;
  background: #fff;
  color: #606266;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
}

.type-btn:hover {
  border-color: #409eff;
  color: #409eff;
}

.type-btn.active {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
}

.form-input {
  width: 100%;
}

.form-tip {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.mount-buttons {
  display: flex;
  gap: 12px;
}

.mount-btn {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  background: #fff;
  color: #606266;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 12px;
}

.mount-btn:hover {
  border-color: #409eff;
  color: #409eff;
}

.mount-btn.active {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
}

.data-acquisition-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.scan-limit-input {
  width: 120px;
}

.button-group-bottom {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.button-group-bottom .el-button {
  flex: 1;
}

/* 二维码显示样式 */
.qr-code-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 10px;
}

.qr-code-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.qr-code-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-align: center;
}

.qr-code-image {
  width: 150px;
  height: 150px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 视频预览内容居中样式 */
.video-preview-content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}
</style>

